<template>
  <div style="padding: 30px;">
    <el-card class="box-card;" shadow="always" style="width: 100%">
      <template #header>
        <div class="card-header" style="text-align: left">
          <span>管理地址</span>
          <el-button class="button" type="primary" @click="addAddress">新增地址</el-button>
        </div>
        <el-table
            :data="addressData"
            style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column
              prop="recreceiver"
              label="收货人"
              width="80">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.recreceiver" v-if="addressEdit"></el-input>
              <span v-else>{{ scope.row.recreceiver }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="rephone"
              label="联系方式"
              width="125">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.rephone" v-if="addressEdit"></el-input>
              <span v-else>{{ scope.row.rephone }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="readdress"
              label="收货地址"
              width="200"
              align="center"
          >
            <!--                  :props="addressProps"-->
            <template slot-scope="scope">
              <el-cascader size="mini" placeholder="请选择地址" v-model="editForm.selectedOptions[scope.$index]"
                           :options="options" @change="handleAddressNode(scope.$index)"
                           :disabled="!addressEdit">
              </el-cascader>
            </template>
          </el-table-column>
          <el-table-column
              prop="rectreet"
              label="详细地址"
              width="180">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.rectreet" v-if="addressEdit"></el-input>
              <span v-else>{{ scope.row.rectreet }}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="recisdefault"
              label="默认地址"
              width="100">
            <template slot-scope="scope">
              <div v-if="addressEdit">
                <el-checkbox
                    v-model=scope.row.recisdefault
                    :true-label="1"
                    :false-label="0"
                    @change="changetest(scope.$index)"
                >
                  设为默认
                </el-checkbox>
              </div>
              <div v-else>
                <el-tag v-if="scope.row.recisdefault===1" type="success" size="mini">默认</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              align="center"
              width="180"
          >
            <template slot-scope="scope">
              <el-button
                  size="small"
                  icon="el-icon-edit"
                  v-if="addressEdit==false"
                  @click="editAddress(scope.$index, scope.row)"
              >编辑
              </el-button>
              <el-button
                  size="small"
                  icon="el-icon-check"
                  v-else
                  @click="saveAddress(scope.$index, scope.row)"
              >保存
              </el-button>
              <el-popconfirm
                  confirmButtonText='好的'
                  cancelButtonText='不用了'
                  icon="el-icon-info"
                  title="确定删除该地址？"
                  @confirm="deleteAddress(scope.$index, scope.row)"
              >
                <template #reference>
                  <el-button
                      size="small"
                      icon="el-icon-delete"
                  >删除
                  </el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-card>

  </div>
</template>

<script>

import {regionData, CodeToText, TextToCode} from 'element-china-area-data'

export default {
  name: "Address",
  data() {
    return {
      editForm: {
        // 存储省市区选中的ID值
        selectedOptions: [],
      },
      addressData: [], //table绑定表格数据
      addressEdit: false, //用于动态修改行内数据
      user: JSON.parse(localStorage.getItem("user")) ? JSON.parse(localStorage.getItem("user")) : "",
      options: regionData,
      address: []
    }
  },
  created() {
    this.loadAddressData()
  },
  methods: {
    loadAddressData() {
      if (!this.user.uid) {
        this.$message({
          type: 'warning',
          message: '请登录！'
        })
        return
      }
      axios.get("receives/" + this.user.uid).then(res => {
        this.addressData = res.data.data
        console.log(this.addressData)
        this.getAddress()
        // this.editForm.selectedOptions
        // let name =this.addressData.map(item => name += TextToCode[item] + '/')
      })
    },
    addAddress() {
      if (!this.user.uid) {
        this.$message({
          type: 'warning',
          message: '请登录！'
        })
        return
      }
      this.addressEdit = true
      this.addressData.push({})
    },
    getAddress() {
      this.addressData.forEach((item, index) => {
        this.editForm.selectedOptions[index] = [TextToCode[item.recprovince].code, TextToCode[item.recprovince][item.reccity].code, TextToCode[item.recprovince][item.reccity][item.recdistrict].code]
      })
    },
    editAddress(index, row) {
      // this.editForm.selectedOptions[index]= [TextToCode[row.recprovince].code,TextToCode[row.recprovince][row.reccity].code,TextToCode[row.recprovince][row.reccity][row.recdistrict].code]
      console.log(this.editForm.selectedOptions[index], "this.editForm.selectedOptions[index]")
      this.addressEdit = true
    },
    saveAddress(index, value) {
      this.addressEdit = false
      if (this.addressData[index].readdress == null) {
        this.$message("地址不能为空！")
      } else {
        // console.log(this.addressData[index])
        axios.post("/receives?uid=" + this.user.uid, this.addressData[index]).then(res => {
          if (res.data.code === 200) {
            this.$message.success("保存成功")
            this.loadAddressData()
          } else {
            this.$message.error("操作失败")
          }
        })
        this.loadAddressData()
      }
    },
    deleteAddress(index, value) {
      axios.delete("/receives/" + this.addressData[index].recid).then(res => {
        if (res.data.code == 200) {
          this.$message.success("删除成功")
          this.loadAddressData()
        } else {
          this.$message.error("删除失败")
        }
      })
      this.loadAddressData()
    },
    handleAddressNode(index) {
      //console.log(value)
      //写一个总地址，拿来检验一下
      let name = ''
      this.editForm.selectedOptions[index].map(item => name += CodeToText[item] + '/')
      this.addressData[index].readdress = name
      // console.log(name) 一块写不好解析，分开再写一遍
      let select = this.editForm.selectedOptions[index]
      console.log(select)
      this.addressData[index].recprovince = CodeToText[select[0]]
      this.addressData[index].reccity = CodeToText[select[1]]
      this.addressData[index].recdistrict = CodeToText[select[2]]
    },
    //设置只能一个默认地址
    changetest(index) {
      // axios.post("/receives/moren?uid=" + this.user.uid+"&recid="+this.addressData[index].recid).then(res=>{
      //   if(res.data.code===200){
      //     this.$message.success(res.data.msg)
      //   }
      //   else {
      //     this.$message.error(res.data.msg)
      //   }
      // })
    }
  }
}
</script>
<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
